<template>
    <a-layout class="left-layout" :class="[`al-layout-theme-${theme}`]">
        <a-layout-header class="left-layout__header">
            <div class="w-full h-full flex flex-row justify-between items-center">
                <div class="h-full flex flex-row justify-between items-center gap-x-4">
                    <div class="left-layout__logo-wrapper">
                        <img src="@/assets/logo.png" />
                    </div>
                    <div v-if="layoutConfig.titleDisplay" class="text-lg left-layout__title" :style="headerStyle">
                        {{ layoutConfig.titleSetting }}
                    </div>
                </div>
                <div class="h-full flex flex-row justify-between items-center gap-x-4">
                    <user-info />
                </div>
            </div>
        </a-layout-header>
        <a-layout>
            <aside-panel />
            <a-layout>
                <a-layout-content class="left-layout__content-wrapper">
                    <router-view v-slot="{ Component }">
                        <transition name="fade">
                            <component :is="Component" />
                        </transition>
                    </router-view>
                </a-layout-content>
                <a-layout-footer v-if="layoutConfig.footerDisplay">{{ layoutConfig.footerSettings }} </a-layout-footer>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import { computed, CSSProperties } from 'vue'
import UserInfo from './components/UserInfo.vue'
import AsidePanel from './components/AsidePanel.vue'

import layoutConfig from '@/layouts/layoutConfig.json'

const headerStyle = computed(() => {
    const style = {
        zIndex: 1,
        textAlign: 'left',
        fontWeight: 400,
        fontStyle: 'normal',
        textDecoration: 'none'
    } as CSSProperties
    style.color = layoutConfig.titleStyle.color
    style.textAlign =
        layoutConfig.titleStyle.align === 'ALIGN_LEFT'
            ? 'left'
            : layoutConfig.titleStyle.align === 'ALIGN_RIGHT'
                ? 'right'
                : 'center'
    if (layoutConfig.titleStyle.bold) {
        style.fontWeight = 700
    }
    if (layoutConfig.titleStyle.italic) {
        style.fontStyle = 'italic'
    }
    if (layoutConfig.titleStyle.underline) {
        style.textDecoration = 'underline'
    }

    return style
})
const theme = computed(() => {
    if (layoutConfig.themeSettings === 'CUSTOM') {
        return 'custom'
    } else if (layoutConfig.themeSettings === 'DARK_COLOR') {
        return 'dark'
    } else {
        return 'light'
    }
})
</script>
<style lang="less">
.left-layout {
    height: 100%;
    // display: none;
    .left-layout__header {
        background-color: @layout-header-background;
        padding: @layout-header-padding;
    }

    .left-layout__logo-wrapper {
        width: 32px;
        display: flex;
        height: 32px;
    }

    .left-layout__title {
        min-width: 130px;
    }

    .left-layout__header+.@{ant-prefix}-layout {
        position: fixed;
        top: @layout-header-height;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .left-layout__content-wrapper {
        height: 100%;
        width: 100%;
        overflow: auto;
        padding: 24px;
        background-color: #fff;
    }

    .@{ant-prefix}-layout-footer {
        padding: 0;
        height: 32px;
        line-height: 32px;
        text-align: center;
    }
}
</style>
